<template>
    <div class="ml-16px mr-16px content-container">
        <Filter :websites="state.websites" @update:data="handleUpdateData" @update:day="handleUpdateDay" />
        <Statistics :statistics="state.statistics" />
        <div class="pl-26px pr-26px pb-26px">
            <el-row>
                <el-col :span="10">
                   <PieChart :PieChartData="state.PieChartData" />
                </el-col>
                <el-col :span="14">
                   <LineChart :LineChartData="state.LineChartData" />
                </el-col>
            </el-row>
        </div>
        <div class="pl-26px pt-26px pr-26px pb-26px">
            <SourceList :data="state.IPUVPVData" />
        </div>
    </div>
</template>

<script setup lang="ts">
import Filter from './components/Filter.vue'
import Statistics from './components/Statistics.vue'
import SourceList from './components/SourceList.vue'
import LineChart from './components/LineChart.vue'
import PieChart from './components/PieChart.vue'
import { getSourceApi,getSourceLineChartApi,getSourceStatisticsApi } from '@/api/sem/index'
import { IRegion,ISite,ISourceLineChart,IStatistics } from '@/api/sem/types'

const state = reactive({
    day: 1,
    startTime: '',
    endTime: '',
    device: 0,
    website: '',
    websites: <ISite[]>[],
    IPUVPVData: <IRegion[]>[],
    LineChartData: <ISourceLineChart><unknown>{},
    PieChartData: [],
    statistics:<IStatistics>{
        IP: 0,
        PV: 0,
        UV: 0,
        JumpOut:'',
        AverageDuration:''
    }
})

let params = {
    start: state.day,
    begintime: state.startTime,
    endtime: state.endTime,
    url: state.website,
    equ: state.device
}

async function getSource(params:any) {
    state.IPUVPVData = []
    state.PieChartData = []
    const res: ResType = await getSourceApi(params)
    if (res.code == 200) {
        state.IPUVPVData = res.data
        state.websites = res.weburllist
        state.PieChartData = res.data
    }
}

async function getSourceLineChart(params:any) {
    state.IPUVPVData = []
    state.LineChartData = <ISourceLineChart><unknown>{}
    const res: ResType = await getSourceLineChartApi(params)
    if (res.code == 200) {
        state.LineChartData = res.data
    }
}

async function getSourceStatistics(params:any){
    const res: ResType = await getSourceStatisticsApi(params)
    if(res.code === 200){
        state.statistics.IP = res.IPCount
        state.statistics.PV = res.PVCount
        state.statistics.UV = res.UVCount
        state.statistics.JumpOut = res.BounceRate
        state.statistics.AverageDuration = res.VisitTime
    }
}

async function handleUpdateData(value:any){
    const { device,endTime,startTime,website } = value
    state.device = device
    state.endTime = endTime
    state.startTime = startTime
    state.website = website
    params = {
        start: state.day,
        begintime: state.startTime,
        endtime: state.endTime,
        url: state.website,
        equ: state.device
    }
    getSource(params)
    getSourceLineChart(params)
    getSourceStatistics(params)
}

function handleUpdateDay(value: any){
    const { day } = value
    state.day = day
    state.endTime = ''
    state.startTime = ''
    params = {
        start: state.day,
        begintime: state.startTime,
        endtime: state.endTime,
        url: state.website,
        equ: state.device
    }
    getSource(params)
    getSourceLineChart(params)
    getSourceStatistics(params)
}

onMounted(() => {
    getSource(params)
    getSourceStatistics(params)
    getSourceLineChart(params)
})
</script>

<style lang="scss" scoped>

</style>